Web development and Tech news Blog site. WEBISFREE.com
[nuxtjs] How to Easily and Quickly Create a Sitemap Using @nuxtjs/sitemap
Last Modified : 12 Oct, 2023 / Created : 12 Oct, 2023There are instances where you need to create a sitemap for SEO. There are various methods to create a sitemap, but doing it manually can be time-consuming and require much effort. In such cases, you can easily create a sitemap using the @nuxtjs/sitemap module available in nuxtjs.
Let's take a closer look below.
Why is a Sitemap Necessary?
Creating and submitting a sitemap to search engines can enhance indexing and potentially increase traffic. Additionally, it can enable search engines to crawl your web pages more quickly and regularly. This can also lead to an increase in visitors.
As mentioned earlier, if you are using the nuxtjs framework, sitemap creation is much easier. The @nuxtjs/sitemap module, when configured in a Nuxt.js application, enables the automatic creation of desired pages quickly and easily.
Next is the installation method. First, you must install the @nuxtjs/sitemap module via NPM or Yarn.
After installation, add @nuxtjs/sitemap to the modules in the nuxt.config.js file and configure it.
@ nuxt.config.js
Now you need to configure for using the sitemap. Add the sitemap block to the nuxt.config.js file as follows.
Here's a brief explanation of the options used.
One of the most important parts of the above options is creating dynamic routes. Let’s explore the method of creating dynamic routes further below.
Generally, one of the biggest advantages of @nuxtjs/sitemap is the ability to create dynamic routes. For instance, if there are 2000 posts stored, you can dynamically add and create them all at once.
Now all steps are completed. As created above, accessing https://mywebsite.com/sitemap.xml will display the sitemap.
Until here, we have looked at a way to easily create a sitemap in nuxtjs.
Let's take a closer look below.
Why is a Sitemap Necessary?
Creating and submitting a sitemap to search engines can enhance indexing and potentially increase traffic. Additionally, it can enable search engines to crawl your web pages more quickly and regularly. This can also lead to an increase in visitors.
Using @nuxtjs/sitemap
As mentioned earlier, if you are using the nuxtjs framework, sitemap creation is much easier. The @nuxtjs/sitemap module, when configured in a Nuxt.js application, enables the automatic creation of desired pages quickly and easily.
Installing @nuxtjs/sitemap
Next is the installation method. First, you must install the @nuxtjs/sitemap module via NPM or Yarn.
npm install @nuxtjs/sitemap
// or
yarn add @nuxtjs/sitemap
// or
yarn add @nuxtjs/sitemap
After installation, add @nuxtjs/sitemap to the modules in the nuxt.config.js file and configure it.
@ nuxt.config.js
export default {
modules: [
...,
'@nuxtjs/sitemap'
],
}
modules: [
...,
'@nuxtjs/sitemap'
],
}
Now you need to configure for using the sitemap. Add the sitemap block to the nuxt.config.js file as follows.
sitemap: {
path: '/sitemap.xml',
hostname: 'https://mywebsite.com',
cacheTime: 1000 * 60 * 15,
gzip: true,
generate: false, // Activate this what if using nuxt generate
exclude: [
'/secret',
'/admin/**'
],
routes: async () => {
const routes = [] // Creation dynamic routes
return routes
}
}
path: '/sitemap.xml',
hostname: 'https://mywebsite.com',
cacheTime: 1000 * 60 * 15,
gzip: true,
generate: false, // Activate this what if using nuxt generate
exclude: [
'/secret',
'/admin/**'
],
routes: async () => {
const routes = [] // Creation dynamic routes
return routes
}
}
Here's a brief explanation of the options used.
- path: The path where the sitemap will be located, commonly used as /sitemap.xml
- hostname: The main hostname of the application
- cacheTime: Cache time of the sitemap (in milliseconds)
- gzip: Whether to enable sitemap compression
- generate: Whether to generate the sitemap when using nuxt generate to build the project
- exclude: An array of routes to exclude from the sitemap (routes that are unnecessary for indexing)
- routes: A function returning an array of routes (can be used to add dynamic routes)
One of the most important parts of the above options is creating dynamic routes. Let’s explore the method of creating dynamic routes further below.
Creating Dynamic Routes
Generally, one of the biggest advantages of @nuxtjs/sitemap is the ability to create dynamic routes. For instance, if there are 2000 posts stored, you can dynamically add and create them all at once.
// Creation dynamic routes with api call with axios
routes: async () => {
const { data } = await axios.get('https://api.yourwebsite.com/posts');
return data.map(post => `/blog/${post.slug}`);
}
routes: async () => {
const { data } = await axios.get('https://api.yourwebsite.com/posts');
return data.map(post => `/blog/${post.slug}`);
}
Now all steps are completed. As created above, accessing https://mywebsite.com/sitemap.xml will display the sitemap.
Until here, we have looked at a way to easily create a sitemap in nuxtjs.
Perhaps you're looking for the following text as well?